<template>
	<view>
		<view class="index-bg">
			<image :src="BASE_URL+'uploads/20250808/0d2b422a320958d5bcebfb573173b548.png'" mode="widthFix"></image>
		</view>
		<view class="z-1">
			<u-navbar :titleStyle='{"color":"#000"}' leftIconColor='#000' title=" " bgColor="transparent"
				@rightClick="rightClick" :autoBack="true" :fixed="false"> </u-navbar>
			<view class="ponts-box align-items-center flex-column">
				<view class="fs-56 color-0 fw-b margin-b-10">{{points}}</view>
				<view class="fs-28 color-0">当前积分</view>
			</view>
			<view class="bg-white" style="min-height: 800rpx">
				<view class="align-items-center list-nav">
					<view class="fs-28 color-0 fw-b" :class="{'active' : navIndex == 0}" @click="getNavType(0,'')">全部</view>
					<view class="fs-28 color-0 fw-b mb-80" :class="{'active' : navIndex == 1}" @click="getNavType(1,2)">收入</view>
					<view class="fs-28 color-0 fw-b" :class="{'active' : navIndex == 2}" @click="getNavType(2,1)">支出</view>
					<view class="flex-1"></view>
					<view class=" img-box" @click="show=true">
                        <image src="/static/image/shop/sort.png" mode="aspectFill"></image>
                    </view>
				</view>
                <view class="line"></view>
				<view>
					<view v-for="(item,index) in list" :key="index">
						<view class="list-box justify-content-between align-items-center">
                            <view class="list-content">
                                <view class="fs-28 color-0 fw-b margin-b-10 only-1">{{item.memo}}</view>
                                <view class="fs-24 color-70">{{item.createtime}}</view>
                            </view>
                            <view class="fs-40 color-0 fw-b flex-1">
                                {{ item.score>0? ('+'+ item.score):item.score }}

                            </view>
                        </view>
                        <view class="line"></view>
					</view>
				</view>
			</view>
		</view>
        <!-- 打开 -->
        <u-popup :show="show" mode="bottom" :round="10" :closeable='true'  @close="show =false">
            <view class="pop-box ">
                <view class=" padding-30">
                    <view class="pop-title fs-30 fw-b color-0 margin-b-40">快捷筛选</view>
                    <view class="tips-box fs-24 flex-box ">
                        <view class="tips-item fs-28 color-0 margin-r-20 margin-b-20" v-for="(item,index) in typeList" :key="index" @click="getType(index)" :class="{'active':typeIndex==index}">
                            {{item.name}}
                        </view>
                    </view>
                </view>

                <view class="btn-box bg-white align-items-center justifyContent-spaceBetween">
                    <view class="btn border-radio-14 color-43 fs-28 flex-1" @click="show=false">
                       取消 
                    </view>
                    <view class="btn border-radio-14 bg-43 color-white fs-28 flex-1" @click="confirm">
                        确认 
                    </view>
                </view>
            </view>
        </u-popup>
	</view>
</template>

<script>
	import {geScoreList} from "@/api/user.js"
	import $baseUrl from "@/config/index.js"
	const BASE_URL = $baseUrl.baseUrl
	export default {
		data() {
			return {
				BASE_URL,
				points: 1521,
				list :[ ],
                navIndex:0 ,
                show:false,
				page:1,
                typeList: [
                    {name:'健康服务站打卡'}, 
                    {name:'健康答题'},
                    {name:'兑换优惠券'}, 
                ],
                typeIndex:-1,
				memo:'',
                isMore:false,
                type:''

			}
		},
		onLoad() {
			this.init()
		},
		
		//上拉加载函数
		onReachBottom(){
		    if(this.isMore){
		        setTimeout(()=>{
		            this.getList()
		        },100)
		    }else{
		        uni.showToast({
		            title: '暂无更多',
		            icon: 'none'
		        })
		    }
		
		},
		onPullDownRefresh () {
		    //刷新初始化数据
		    this.init()
		    //关闭刷新动画
		    setTimeout(function () {
		        uni.stopPullDownRefresh()
		    }, 1000)
		},
		methods: {
			init(){
				this.page=1
				this.list=[]
				this.getList()
			},
			getList(){
                let params = {
                    page:this.page,
                    limit:10,
                    memo:this.memo,
                    type:this.type
                }
				geScoreList(params).then(res=>{
					if (res.code == 1){
						this.list =this.list.concat(res.data)
                        if (res.data.length < 10){
                            this.isMore = false
                        }else {
                            this.isMore = true
                            this.page ++
                        }
					}else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
				})
			},
			confirm() {
                if (this.typeIndex == -1){
                    this.memo = ''
                }else {
                    this.memo = this.typeList[ this.typeIndex].name
                }

				this.init()
				this.show=false
			},
            getNavType( index,i){

                this.navIndex = index;
                this.type =i
                this.init()
            },
            getType( index){
                if (index ==  this.typeIndex ){
                    this.typeIndex =-1
                }else {
                    this.typeIndex = index;
                }

            }
		}
	}
</script>

<style lang="scss" scoped>
	.ponts-box {
		height: 190rpx;
	}
	.list-box {
		width: 100%;
		padding: 24rpx 30rpx;
		.list-content {
			 width: 600rpx;
		}
		.fs-40 {
			text-align: right;
		}
	}

    .list-nav {
        height: 95rpx;
        padding: 0 30rpx;
        .active {
            position: relative;
            &::after {
                position: absolute;
                left: 50%;
                bottom: -20rpx;
                content: '';
                width: 34rpx;
                height: 5rpx;
                transform: translateX(-50%);
                background: #000000;
            }

        }
        .mb-80 {
            margin: 0 80rpx;
        }
        .img-box {
            image {
                width: 25rpx;
                height: 25rpx;
            }
        }
    }
    .pop-box {
        border-radius: 20rpx 20rpx 0 0;
        .upload-image {
            padding: 30rpx 0;
            image {
                width: 200rpx;
                height: 200rpx;
            }
        }
        .pop-title {
        }
        .tips-box {
            image {
                width: 24rpx;
                min-width: 24rpx;
                margin-top: 10rpx;
                height: 24rpx;
                margin-right: 20rpx;
            }
            text {
                color: #F3641E;
            }
        }
        .btn-box {
            height: 162rpx;
            padding: 10rpx 30rpx 0;
            .btn {
                height: 90rpx; 
				max-width: 340rpx;				background: #EFFBFE;
				border: 1px solid #43ABC4;
                text-align: center;
                line-height: 90rpx;
            }
			.bg-43 {
				background-color: #43ABC4;
			}
        }
    }
    .tips-box {
        flex-wrap: wrap;
    }
    .tips-item {
        padding: 0 50rpx;
        height: 80rpx;
        border-radius: 40rpx;
        line-height: 80rpx;
        background: #F0F0F0;
        border: 1px solid #F0F0F0;
        &.active {
            border: 1px solid #43ABC4;
            background: #EFFBFE;
            color: #43ABC4;;
        }
    }
</style>